<template>
  <el-menu
    :default-active="activeMenu"
    :collapse="isCollapse"
    :unique-opened="true"
    background-color="#001529"
    text-color="#fff"
    active-text-color="#1890ff"
    class="admin-menu"
    router
  >
    <el-menu-item index="/admin/dashboard" v-if="can('dashboard:view')">
      <el-icon><DataBoard /></el-icon>
      <template #title>数据看板</template>
    </el-menu-item>

    <el-sub-menu index="user" v-if="can('user:list')">
      <template #title>
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item index="/admin/user/list">用户列表</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="shop" v-if="can('product:list') || can('order:list') || can('shop:stats')">
      <template #title>
        <el-icon><ShoppingCart /></el-icon>
        <span>商城管理</span>
      </template>
      <el-menu-item index="/admin/product/list" v-if="can('product:list')">商品管理</el-menu-item>
      <el-menu-item index="/admin/order/list" v-if="can('order:list')">订单管理</el-menu-item>
      <el-menu-item index="/admin/shop/statistics" v-if="can('shop:stats')">商城统计</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="community" v-if="can('post:list') || can('comment:list') || can('community:stats')">
      <template #title>
        <el-icon><ChatDotRound /></el-icon>
        <span>社区管理</span>
      </template>
      <el-menu-item index="/admin/post/list" v-if="can('post:list')">帖子管理</el-menu-item>
      <el-menu-item index="/admin/comment/list" v-if="can('comment:list')">评论管理</el-menu-item>
      <el-menu-item index="/admin/community/statistics" v-if="can('community:stats')">社区统计</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="system" v-if="can('admin:list') || can('log:list') || can('system:settings')">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/admin/admin/list" v-if="can('admin:list')">管理员管理</el-menu-item>
      <el-menu-item index="/admin/log/list" v-if="can('log:list')">操作日志</el-menu-item>
      <el-menu-item index="/admin/system/settings" v-if="can('system:settings')">系统设置</el-menu-item>
    </el-sub-menu>

    <el-menu-item index="/admin/profile">
      <el-icon><UserFilled /></el-icon>
      <template #title>个人中心</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'
import {
  DataBoard,
  User,
  UserFilled,
  ShoppingCart,
  ChatDotRound,
  Setting
} from '@element-plus/icons-vue'

defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()
const auth = useAuthStore()

const activeMenu = computed(() => {
  return route.path
})

const can = (perm) => auth.hasPermission(perm)
</script>

<style scoped>
.admin-menu {
  border-right: none;
  height: calc(100vh - 60px);
}

.admin-menu:not(.el-menu--collapse) {
  width: 200px;
}
</style>

